<template>
  <div class="detial">
    <!-- 标题 -->
    <div class="title" v-if="showDetial">
      <span class="iconfont icon-arrow-left-bold" @click="goBack()"></span>
      {{ film.name }}
    </div>
    <!-- 电影信息 -->
    <div class="info" v-if="showDetial">
      <div class="someInfo">
        <div class="bg">
          <img :src= film.poster alt="" />
        </div>
        <div class="pic">
          <img :src= film.poster alt="" />
        </div>
        <ul>
          <li>{{ film.name }}</li>
          <li>导演：{{ film.director }}</li>
          <li>{{ film.category }}</li>
          <li>{{ film.nation }} / {{ film.runtime }}分钟</li>
          <li>{{ film.premiereAt | formatPremiereAt }} 中国大陆上映</li>
        </ul>
      </div>
      <div class="like">
        <button><span class="iconfont icon-fabulous"></span> 想看</button>
        <button><span class="iconfont icon-favorite"></span> 评分</button>
      </div>
    </div>
    <!-- 电影简介 -->
    <div class="summary" v-if="showDetial">
      <span>{{ film.synopsis }}</span
      >
    </div>
    <!-- 演员列表 -->
    <div class="actors" v-if="showDetial">
      <h3>演职人员</h3>
      <div class="wrapper" ref="wrapper">
        <ul class="actor-info" ref="content">
        <!-- 单个演员 -->
        <li class="the-actor" v-for="(item,index) in actorsList" :key="'item' + index">
          <ul>
            <li>
              <img :src= item.avatarAddress alt="">
            </li>
            <li>{{ item.name }}</li>
            <li>{{ item.role }}</li>
          </ul>
        </li>
      </ul>
      </div>
    </div>
    <!-- 剧照列表 -->
    <div class="photos" v-if="showDetial">
      <h3>
        <span>剧照</span>
        <span @click="showPhotos">全部(5) &gt; </span>
      </h3>
      <div class="pwrapper" ref="pwrapper">
        <ul ref="pcontent">
        <li v-for="(item,index) in photosList" :key="'item' + index">
          <img :src= item alt="">
        </li>
      </ul>
      </div>
    </div>
    <!-- 所有剧照 -->
    <div class="all-photos" v-if="display">
      <h2>
        <span class="iconfont icon-arrow-left-bold" @click="noShowPhotos"></span>
          剧照
      </h2>
      <ul>
        <li v-for="(item,index) in photosList" :key="'item' + index">
          <img :src= item alt="">
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {moiveDetailData} from "../../api/api"
import moment from 'moment';
import BScroll from "better-scroll"


export default {
  data() {
    return {
      //电影的相关信息
      film: {},
      //演职人员列表
      actorsList: [],
      //剧照列表
      photosList: [],
      //是否显示所有剧照
      display: false,
      //是否显示详情页
      showDetial: true,
      //演员滑动屏幕
      bsscroll: null,
      //剧照滑动屏幕
      pbsscroll: null
    }
  },
  mounted() {
    //演员水平滑动
    this.$nextTick(()=> {
      this.$refs.content.style.width = 10+ 'rem'
      this.bsscroll = new BScroll(this.$refs.wrapper, {
        //水平滑动
        scrollX: true,
        //允许点击事件
        click: true,
        probeType: 3,
        useTransition: false,
      })
    }),
    //剧照水平滑动
    this.$nextTick(()=> {
      this.$refs.pcontent.style.width = 16+ 'rem'
      this.pbsscroll = new BScroll(this.$refs.pwrapper, {
        //水平滑动
        scrollX: true,
        //允许点击事件
        click: true,
        probeType: 3,
        useTransition: false,
      })
    })
  },
  beforeDestroy() {
    //节约资源
    this.bsscroll = null
    this.pbsscroll = null
  },
  async created() {
    let res = await moiveDetailData(this.$route.params.filmid)
    this.film = res.data.data.film
    console.log(this.film);
    this.actorsList = this.film.actors
    // console.log(this.actorsList);
    this.photosList = this.film.photos
    // console.log(this.photosList);
  },
  filters: {
    //格式化上映日期
    formatPremiereAt: function(value) {
      return moment(value * 1000).format("YYYY年MM月DD日")
    }
  },
  methods: {
    //返回上一页
    goBack() {
      return window.history.back()
    },
    //显示剧组照片
    showPhotos() {
      this.display = true
      this.showDetial = false
    },
    //不显示剧组照片
    noShowPhotos() {
      this.display = false
      this.showDetial = true
    }
  }
};
</script>

<style scoped lang="scss">
.detial {
  margin-top: 1.1rem;
  width: 100%;
  position: relative;
  //电影标题
  .title {
    line-height: 1.1rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; 
    background-color: red;
    color: #fff;
    z-index: 6;
    font-size: .4rem;
    text-align: center;
    span {
      position:absolute;
      top: .06rem;
      left: .4rem;
      font-size: .5rem;
    }
  }
  // 电影信息
  .info {
    height: 4.2rem;
    padding: 0.2rem 0.3rem 0.1rem;
    position: relative;
    .bg {
      position:absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      z-index: -999;
      img {
        width: 100%;
        height: 100%;
        filter: blur(12px); // 虚化的程度
      }
    }
    .someInfo {
      display: flex;
      .pic {
        border: 1px solid #fff;
        width: 2.3rem;
        height: 2.8rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      ul {
        margin-left: 0.3rem;
        width: 4.3rem;
        li {
          font-size: 0.2rem;
          color: rgb(233, 230, 230);
          margin-bottom: 0.15rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 0.25rem;
        }
        li:nth-child(1) {
          font-size: 0.4rem;
          color: #fff;
        }
        li:nth-child(5) {
          font-size: 0.25rem;
          color: yellow;
        }
      }
    }
    .like {
      display: flex;
      justify-content: space-between;
      margin-top: .3rem;
      button {
        width: 3.2rem;
        height: 0.7rem;
        background-color: rgba(255, 255, 255, 0.5);
        border: 1px solid #fff;
        color: #fff;
        font-size: 0.3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        span {
          font-size: .4rem;
          margin-right: .2rem;
        }
      }
    }
  }
  // 电影简介
  .summary {
    width: 100%;
    padding: 0.3rem;
    white-space: wrap;
    font-size: .3rem;
    text-indent: .6rem;
    line-height: .6rem;
    border-bottom: 1px solid #ccc;
  }
  //演员列表
  .actors {
    // background-color: blue;
    height: 4.2rem;
    width: 100%;
    padding: 0 .3rem;
    border-bottom: 1px solid #ccc;
    h3 {
      font-size: .35rem;
      line-height: .9rem;
    }
    .wrapper {
      width: 100%;
      overflow: hidden;
      .actor-info {
      display: flex;
      .the-actor {
        font-size: .3rem;
        width: 1.6rem;
        text-align: center;
        margin-bottom: .05rem;
        margin-right: .2rem;
        li:nth-child(3) {
          color: gray;
        }
        img {
          width: 1.6rem;
          height: 2rem;
        }
        li {
          padding-bottom: .1rem;
          //文本溢出隐藏
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    }
  }
  //剧照
  .photos {
    width: 100%;
    padding: 0 .3rem;
    h3 {
      font-size: .35rem;
      line-height: .9rem;
      display: flex;
      justify-content: space-between;
      span:nth-child(2) {
        font-size: .3rem;
        color: gray;
      }
    }
    .pwrapper {
      overflow: hidden;
      ul {
        padding-bottom: .5rem;
        display: flex;
        li {
          width: 2.8rem;
          height: 1.8rem;
          border: 1px solid green;
          margin-right: .2rem;
          img {
            height: 100%;
            width: 2.8rem;
          }
        }
      }
    }
  }
  //所有剧照
  .all-photos {
    position: absolute;
    width: 100%;
    background-color: #fff;
    z-index: 999;
    h2 {
      font-size: .4rem;
      text-align: center;
      line-height: .9rem;
      position: relative;
      background-color: red;
      color: #fff;
      span {
        position: absolute;
        left: .2rem;
        font-size: .5rem;
      }
    }
    ul {
      padding: 0 .3rem;
      margin-top: .3rem;
      padding-bottom: .5rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        width: 3.3rem;
        height: 2.2rem;
        margin-bottom: .3rem;
        img {
          height: 100%;
          width: 100%;
        }
      }
    }
  }
}
</style>